<template>
    <div>
        <el-alert
            title="注册类型: 激活+注册. 付费类型: 激活+注册+充值. 部分渠道还会上传N日留存."
            type="info"
            :closable="false"
            show-icon>
        </el-alert>
        <el-divider></el-divider>
        <div class="filter-container">
            <el-form label-position="top" :inline="true" class="mt-10">
                <el-form-item label="渠道类型">
                    <select-app-source-type v-model="source_type" :multiple="false"></select-app-source-type>
                </el-form-item>
                <el-form-item label="应用渠道">
                    <select-app-source v-model="source" :type="source_type"></select-app-source>
                </el-form-item>
                <el-form-item label="类型">
                    <el-radio-group v-model="callbackType">
                        <el-radio-button label="pay">付费</el-radio-button>
                        <el-radio-button label="register">注册</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="密钥" v-show="channel==='baidu'">
                    <el-input v-model="callbackKey" placeholder="密钥"></el-input>
                </el-form-item>
                <el-form-item label="广告链接" v-show="channel==='jizhun'">
                    <el-input v-model="callbackAdUrl" placeholder="广告链接"></el-input>
                </el-form-item>
                <el-form-item label="-">
                    <el-button type="primary" @click="copyUrl($event)" class="btn-copy">点我复制</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-tabs v-model="channel" @tab-click="handleClick" type="border-card">
            <el-tab-pane :label="item" :name="item" v-for="(item, index) in channels" :key="`channel${index}`">
                <h4 class="mt-20 mb-20">{{ callback }}</h4>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import dialogForm from './form'
import Clipboard from 'clipboard';
import SelectAppSourceType from '~/components/Select/app-source-type';

export default {
    components: {
        dialogForm,
        SelectAppSourceType,
    },
    data() {
        return {
            channel: "sigmob",
            channels: ["sigmob", "baidu", "jizhun", "honor", "uc", "kuaishou"],

            source_type: '',
            source: 100,
            callbackType: 'pay',
            callbackKey: '',
            callbackAdUrl: '',
            dialogClipboardShow: false,
        }
    },
    computed: {
        configs() {
            return this.$store.state.appSourceCpa.configs;
        },
        callback() {
            let url = "";
            if (this.channel === "sigmob") {
                url = "/类型?imei=_ORIMEIMD5_&oaid=_OROAIDMD5_&clickid=_CLICKID_&callback=_CALLBACK_";
            } else if (this.channel === "baidu") {
                url = "/类型?imei=__IMEI__&oaid=__OAID_MD5__&clickid=__CLICK_ID__&callback=__CALLBACK_URL__&ip=__IP__&ipv6=__IPV6__&a_key=密钥&sign=__SIGN__";
            } else if (this.channel === "jizhun") {
                url = "/广告链接";
            } else if (this.channel === "honor") {
                url = "/类型?oaid=__OAID__&clickid=__REQUESTID__&advertiser_id=__ADVERTISER_ID__&track_id=__TRACK_ID__&ip=__IP__";
            } else if (this.channel === "uc") {
                url = "/类型?imei={IMEI_SUM1}&oaid={OAID}&oaid_md5={OAID_SUM1}&callback={CALLBACK_URL}&ip={IP}&ts={UX_TS}";
            } else if (this.channel === "kuaishou") {
                url = "/类型?accoutid=__ACCOUNTID__&aid=__AID__&cid=__CID__&dname=__DNAME__&oaidMD5=__OAID2__&imeiMD5=__IMEI2__&ip=__IPV4__&callback=__CALLBACK__"
            }
            url = url.replace("类型", this.callbackType)
                .replace("密钥", this.callbackKey)
                .replace("广告链接", this.callbackAdUrl);
            return `${this.$API_GO_URL}/api/v1/promo-callback/${this.channel}/${this.source}${url}`;
        }
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        copyUrl(event) {
            const cb = new Clipboard('.t', {
                text: () => this.callback,
            });
            cb.on('success', (e) => {
                cb.off('error');
                cb.off('success');
                this.$message.success('复制成功');

            });
            cb.on('error', (e) => {
                cb.off('error');
                cb.off('success');
                console.error('clipboardCopy error', e);
                this.$message.warning('复制失败');
            });
            cb.onClick(event);
        },
    },
    created() {

    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>
